import TagGroup from '@/components/TagGroup';
import { updateMark } from '@/services/api/api-datahub-mark';
import { ProFormDigit, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
import ProForm, { DrawerForm } from '@ant-design/pro-form';
import { message } from 'antd';
import React from 'react';

interface EditMarkProps {
  data: DatahubMarkData.MarkPage;
  onRefurbish: () => void;
}
const EditMark: React.FC<EditMarkProps> = ({ onRefurbish, data }) => {
  return (
    <DrawerForm
      title="编辑"
      drawerProps={{
        destroyOnClose: true,
        width: 500,
      }}
      trigger={<a>编辑</a>}
      initialValues={{
        name: data?.name,
        describes: data?.describes,
        hits: data?.hits,
        occurrence: data?.occurrence,
      }}
      onFinish={async (values) => {
        const response = await updateMark({
          id: data.id,
          ...values,
        });
        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
        }
        return true;
      }}
    >
      <ProFormText
        width="xl"
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
      />

      <ProFormDigit
        width="xl"
        name="occurrence"
        label="触发条件"
        min={1}
        max={1000}
        rules={[{ required: true, message: '请输入触发条件' }]}
      />

      <ProFormTextArea name="describes" label="名称" width="xl" placeholder="请输入名称" />
      <ProForm.Item
        label={
          <>
            <span
              style={{
                color: '#ff4d4f',
                fontSize: 14,
                paddingRight: 4,
              }}
            >
              *
            </span>
            命中词
          </>
        }
        name="hits"
        extra={<div>最少输入一个</div>}
      >
        <TagGroup />
      </ProForm.Item>
    </DrawerForm>
  );
};
export default EditMark;
